<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框(焦点事件示例)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/
        }

        ul {
            list-style: none; /* 清除列表标签 默认的项目图标 */
        }

        .小米搜索框 {
            position: relative; /* 定位: 相对定位.  子定父相定位方法*/
            width: 223px; /* 宽 */
            margin: 100px auto; /* 版心居中, 要起作用必须同时设置 宽 */
        }

        .小米搜索框 input {
            width: 223px; /* 宽高 */
            height: 48px;
            padding: 0 10px; /* 内边距: 上下 左右 */
            font-size: 14px; /* 文字大小 */
            line-height: 48px; /* 行高与高相同, 文字垂直居中 */
            border: 1px solid #e0e0e0; /* 边框线: 粗细 实线 颜色 */
            outline: none; /*去掉 表单控件焦点框, 这里效果是去除输入框外边的黑框*/
        }

        .小米搜索框 .边框颜色 {
            border: 1px solid #ff6700; /* 边框线: 粗细 实线 颜色 */
        }

        .下拉列表 {
            display: none; /* 显示:隐藏 , 效果隐藏下拉菜单列表*/
            /*display: block; !* 显示:块级 , 效果显示下拉菜单列表*!*/

            position: absolute; /* 定位: 绝对定位.  子定父相定位方法*/
            left: 0; /* 定位 偏移量 */
            top: 48px;

            width: 223px; /* 高 */
            border: 1px solid #ff6700; /* 边框线 */
            border-top: 0; /* 边框线顶部, 效果是顶部边框线不显线 */
            background: #fff; /* 背景色 */
        }

        .下拉列表 a {
            display: block; /* 转换标签显示模式: 块级 */
            padding: 6px 15px; /* 内边距, 效果文字都有间隔 */
            font-size: 12px; /* 文字大小 颜色*/
            color: #424242;
            text-decoration: none; /* 去除a标签 默认的下划线 */
        }

        /* 鼠标悬浮状态 , 效果效果背景色*/
        .下拉列表 a:hover {
            background-color: #eee; /* 盒子 背景色 */
        }
    </style>
</head>
<body>

<!--
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
分析：
①：开始下拉菜单要进行隐藏
②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
③：表单失去焦点，反向操作
-->
<div class="小米搜索框">
    <label>
        <input type="search" placeholder="小米笔记本">
    </label>
    <ul class="下拉列表">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
    </ul>
</div>

<script>

    // 获取DOM元素
    const 输入框=document.querySelector('.小米搜索框 input')
    const 下拉菜单=document.querySelector('.小米搜索框 .下拉列表')

    // 事件监听: 获取焦点
    输入框.addEventListener('focus', function () {
        // ul 内容显示
        下拉菜单.style.display = 'block' // 更改显示模式, 效果下拉列表显示
        // 添加一个带有颜色边框的类名
        输入框.classList.add('边框颜色') // 添加 CSS类
    })

    // 事件监听: 失去焦点
    输入框.addEventListener('blur', function () {
        下拉菜单.style.display = 'none' // 更改显示模式, 效果下拉列表隐藏
        输入框.classList.remove('边框颜色') // 删除 CSS类
    })
</script>

</body>
</html>